<template>
  <div>
    <!-- 表格 -->
    <el-table :data="goods.goodsList" style="width: 100%" :default-sort="{ prop: 'id', order: 'ascending' }" border>
      <el-table-column type='index' label="#" min-width="50" sortable></el-table-column>
      <el-table-column prop="goods_name" label="商品名称" min-width="400" sortable />
      <el-table-column prop="goods_id" label="商品ID" min-width="130" sortable />
      <el-table-column prop="goods_number" label="商品数量" min-width="130" sortable />
      <el-table-column prop="goods_price" label="商品价格" min-width="130" sortable />
      <el-table-column prop="goods_weight" label="商品重量" min-width="130" sortable />
      <el-table-column prop="add_time" label="创建时间" min-width="180" sortable>
        <template v-slot="scope">
          {{ formatDate(scope.row.add_time, 'yyyy-mm-dd HH:MM:ss') }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="130">
        <template v-slot="scope">
          <el-row :gutter="10" justify="space-between">
            <!-- 编辑 -->
            <el-col :span="12">
              <el-button type="primary" size="small" :plain="true" @click="editClick(scope.row)">编辑</el-button>
            </el-col>
            <!-- 删除 -->
            <el-col :span="12">
              <el-button type="danger" size="small" :plain="true" @click="deleteClick(scope.row)">删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑商品的 dialog 框 -->
    <el-dialog title="编辑商品" v-model="goods.editDialog" width="50%">
      <!-- 内容主体区域 -->
      <el-form ref="editFormRef" :model="goods.editGoodsParams" :rules="editRules" label-position="top" status-icon>
        <el-form-item label="商品ID" prop="id">
          <el-input v-model="goods.editGoodsParams.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goods_name">
          <el-input v-model="goods.editGoodsParams.goods_name" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="goods_cat">
          <el-input v-model="goods.editGoodsParams.goods_cat"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goods_price">
          <el-input v-model="goods.editGoodsParams.goods_price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goods_number">
          <el-input v-model="goods.editGoodsParams.goods_number"></el-input>
        </el-form-item>
        <el-form-item label="商品重量" prop="goods_weight">
          <el-input v-model="goods.editGoodsParams.goods_weight"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="goods_introduce">
          <el-input v-model="goods.editGoodsParams.goods_introduce" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="pics">
          <el-input v-model="goods.editGoodsParams.pics"></el-input>
        </el-form-item>
        <el-form-item label="商品参数" prop="attrs">
          <el-input v-model="goods.editGoodsParams.attrs"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="goods.editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editGoods">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive } from "vue"
import { formatDate } from "@/utils/dataFormat.js"// 时间格式化
import useStore from "@/pinia/index.js";
const { goods } = useStore();
// 获取商品列表数据
goods.REQUEST_goodsList();
// 表单验证对象
const editFormRef = ref()
// 表单验证规则
const editRules = reactive({
  goods_name: [
    { required: true, message: "请输入商品名称", trigger: "blur" },
    { min: 2, max: 100, message: "长度在 2 到 100 个字符", trigger: "blur" }
  ],
  goods_cat: [
    { required: true, message: "请选择商品分类", trigger: "blur" },
  ],
  goods_price: [
    { required: true, message: "请输入商品价格", trigger: "blur" },
    {
      pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
      message: "格式错误,只能输入数字且最多两位小数!",
      trigger: "blur"
    }
  ],
  goods_number: [
    { required: true, message: "请输入商品数量", trigger: "blur" },
    {
      pattern: /^\d{1,8}$/,
      message: "格式错误,只能输入1-8位数量!",
      trigger: "blur"
    }
  ],
  goods_weight: [
    { required: true, message: "请输入商品重量", trigger: "blur" },
    {
      pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
      message: "格式错误,只能输入数字且最多两位小数!",
      trigger: "blur"
    }
  ],
  goods_introduce: [
    { required: false, message: "请输入商品描述", trigger: "blur" },
    { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
  ],
  pics: [
    { required: false, message: "请输入商品图片", trigger: "blur" }
  ],
  attrs: [
    { required: false, message: "请输入商品参数", trigger: "blur" }
  ]
});
// 编辑按钮点击
const editClick = (row) => {
  goods.editGoodsParams.id = row.goods_id
  goods.editGoodsParams.goods_name = row.goods_name
  goods.editGoodsParams.goods_price = row.goods_price
  goods.editGoodsParams.goods_number = row.goods_number
  goods.editGoodsParams.goods_weight = row.goods_weight
  goods.editGoodsParams.goods_introduce = row.goods_introduce
  goods.editGoodsParams.pics = row.pics
  goods.editGoodsParams.attrs = row.attrs
  goods.editDialog = true;// 显示编辑弹窗
};
// 删除按钮点击
const deleteClick = (row) => {
  goods.deleteGoodsParams.id = row.goods_id;// 设置删除的id
  goods.REQUEST_deleteGoods()
};
// 编辑商品提交
const editGoods = () => {
  // 表单验证
  editFormRef.value.validate((valid) => {
    if (valid) {
      goods.REQUEST_editGoods();
    } else {
      console.log("error submit!!!");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.dialog-footer {
  button:first-child {
    margin-right: 12px;
  }
}
</style>